<template>
  <div class="login-page">
    <!--
      修改组件样式:
      1. 给它加类名, 这个类名会自动添加到组件的根元素上
      2. 所有的组件都会严格按照规范, 有一个自带的类名: 组件名
     -->
    <el-card>
      <!-- 具名插槽: header -->
      <template #header>
        黑马面经运营后台
      </template>
      <!--
        el-form: 表示整个表单区域
        el-form-item: 表示一行表单内容
        el-input: 文本框
       -->

       <!--
        表单校验三要素:
        1. el-form: 必须要有 model 属性和 rules 属性
          - model: 表示当前表单绑定的数据对象
          - rules: 规则, 校验规则
        2. el-form-item: 必须要有 prop 属性来指定校验规则
        3. el-input: 必须使用 v-model 绑定数据
        -->
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="用户名:" prop="username">
          <el-input placeholder="请输入用户名" v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码:" prop="password">
          <el-input placeholder="请输入密码" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item class="tc">
          <el-button @click="login" type="primary">登录</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'LoginIndex',
  data () {
    return {
      form: {
        username: '',
        password: ''
      },
      // 校验规则
      rules: {
        // username 是 prop 指定的名字, 一般情况下建议:
        // 数据 - prop - 规则名三者保持一致
        username: [ // 因为数组可以存多条校验规则
          // required: 必填项
          // message: 提示信息
          // trigger: 什么时机校验, blur: 失去焦点时校验
          // min / max: 最小长度和最大长度
          // pattern: 正则校验
          { required: true, message: '请输入用户名', trigger: ['blur', 'change'] },
          { min: 5, max: 11, message: '长度在 5 到 11 个字符', trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: ['blur', 'change'] },
          { pattern: /^\w{5,10}$/, message: '长度在 5 到 10 个字符', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  methods: {
    login () {
      // 兜底校验, 校验整个表单是否通过验证, 通过验证才允许发请求
      // 在发送请求登录前, 对表单进行一个预校验
      // ref 可以获取 DOM 元素也可以获取组件对象, validate 是 el-form 组件提供的校验方法
      this.$refs.form.validate(async valid => {
        // console.log(valid)
        if (!valid) return
        // try {
        // console.log('我要登录')
        // 注意: dispatch 触发 actions 的执行, 由于 actions 中做的是异步任务, 所以无法立即获取到结果
        // 一定要加 await!!!
        // 或者用 .then() 拿结果
        await this.$store.dispatch('user/loginAction', this.form)
        // console.log('跳转到首页')
        // 跳转到首页
        this.$router.push('/')
        // 提醒用户登录成功
        this.$message.success('登录成功')
        // } catch (e) {
        //   // console.log(e)
        //   this.$message.error(e.response.data.message)
        // }
      })
    },
    reset () {
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
// scoped 只能给当前组件内的所有标签添加 data-v-hash
// 但是, el-card 里面的元素没有被添加这个唯一标识, 所以直接设置样式无法生效
// 解决方案: 深度作用选择器
// less: 在选择器前面添加 /deep/
// scss: 在选择器前面添加 ::v-deep
.login-page {
  min-height: 100vh;
  background: url(@/assets/login-bg.svg) no-repeat center / cover;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .el-card {
    width: 420px;
    ::v-deep .el-card__header{
      height: 80px;
      background: rgba(114,124,245,1);
      text-align: center;
      line-height: 40px;
      color: #fff;
      font-size: 18px;
    }
  }
  .el-form {
    padding: 0 20px;
  }
  .tc {
    text-align: center;
  }
}
// .el-card {
//   width: 420px;
// }
</style>
